<template lang="html">
	<div class="classification_mian">
		<ul class="classification_mian_box">
			<li v-for="(item, index1) in list">
				<router-link class="del_left" :to="{path:'/cuxiaodetails',query:{id:item.id}}">
					<h2>{{item.price}}</h2>
		            <img :src="item.thumb" :alt="item.title">
		            <p>{{item.title}}</p>
				</router-link>
				<router-link class="del_left" :to="{path:'/cuxiaoshjidetails',query:{id:item.id,imgurl:item.sp_jianjie_list}}">
					<h2>{{item.sp_price}}</h2>
		            <img :src="item.sp_thumb" :alt="item.sp_title">
		            <p>{{item.sp_title}}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>
<script type="text/javascript">
	export default {
	  props:["list"],
	  data(){
	  	return{}
	  },
	  methods:{
	    
	  },
	  components:{

	  }
	}
</script>
<style type="text/css" lang="less">
	@import '../../../assets/less/index.less';
	.classification_mian{
		.classification_mian_box{
			li{
				width: @width;
				height: 40vw;
				margin: 0 auto;
				background-image: url("../../../assets/img/banner/muban.png");
				background-size: 93.333vw 19.2vw;
				background-repeat: no-repeat;
				background-position: 50% 70%;
				overflow: hidden;
				zoom:1;
				.del_left{
					width: 50%;
					display: block;
					float: left;
				}
				h2{
					.icon-Pricetag_1();
					color: @color1;
					font-size: @h1_font_size;
					line-height: 7vw;
					position: relative;
					top: 3vw;
				}
				img{
					width: 21.33vw;
					height: 21.333vw;
					margin-bottom: 3vw;
				}
				p{
					color: @color7;
					width: 100%;
					font-size: @h3_font_size;
					.font_space(1);
				}
				.del_left:nth-child(2n) h2{
					.icon-Pricetag_2();
					left: 28vw;
				}
			}
		}
	}
</style>